<template>
  <div class="blog-archive">
    <!-- 归档页内容 -->
    <main class="archive-content">
      <h1 class="archive-title">文章归档</h1>

      <!-- 按年份和月份分组展示文章 -->
      <div v-for="(yearData, year) in archiveData" :key="year" class="year-section">
        <h2 class="year-title" @click="toggleYear(year)">
          {{ year }} 年
          <span class="toggle-icon">{{ isYearOpen(year) ? '▼' : '▶' }}</span>
        </h2>

        <!-- 按月展示文章 -->
        <div v-if="isYearOpen(year)" class="month-section">
          <div v-for="(monthData, month) in yearData" :key="month" class="month-group">
            <h3 class="month-title">{{ month }} 月</h3>
            <ul class="article-list">
              <li v-for="article in monthData" :key="article.id" class="article-item">
                <router-link :to="`/post/${article.id}`" class="article-link">
                  <span class="article-title">{{ article.title }}</span>
                  <span class="article-date">{{ formatDate(article.date) }}</span>
                </router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 模拟归档数据
const archiveData = ref({
  2023: {
    10: [
      { id: 1, title: 'Vue 3 入门指南', date: '2023-10-01' },
      { id: 2, title: 'Django 全栈开发实战', date: '2023-10-15' },
    ],
    9: [
      { id: 3, title: 'Python 数据分析入门', date: '2023-09-20' },
      { id: 4, title: '前端性能优化技巧', date: '2023-09-15' },
    ],
  },
  2022: {
    12: [
      { id: 5, title: 'React 入门教程', date: '2022-12-10' },
    ],
    11: [
      { id: 6, title: 'Node.js 实战', date: '2022-11-05' },
    ],
  },
});

// 控制年份展开/折叠
const openYears = ref(new Set());

const toggleYear = (year) => {
  if (openYears.value.has(year)) {
    openYears.value.delete(year);
  } else {
    openYears.value.add(year);
  }
};

const isYearOpen = (year) => {
  return openYears.value.has(year);
};

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' });
};
</script>

<style scoped>
.blog-archive {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.archive-content {
  margin-top: 40px;
}

.archive-title {
  font-size: 2.5rem;
  color: #1a73e8;
  text-align: center;
  margin-bottom: 40px;
  font-weight: bold;
  background: linear-gradient(135deg, #1a73e8, #4caf50);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.year-section {
  margin-bottom: 20px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.year-section:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}

.year-title {
  font-size: 1.8rem;
  color: #1a73e8;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: 600;
}

.toggle-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.year-title:hover .toggle-icon {
  transform: scale(1.2);
}

.month-section {
  margin-left: 20px;
}

.month-title {
  font-size: 1.5rem;
  color: #4caf50;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 600;
  padding-left: 10px;
  border-left: 4px solid #4caf50;
}

.article-list {
  list-style-type: none;
  padding: 0;
}

.article-item {
  margin-bottom: 10px;
}

.article-link {
  text-decoration: none;
  color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-radius: 8px;
  background-color: #f9fafb;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.article-link:hover {
  background-color: #e3f2fd;
  transform: translateX(10px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.article-title {
  font-size: 1.1rem;
  font-weight: 500;
}

.article-date {
  font-size: 0.9rem;
  color: #888;
}
</style>